<!--
 * @Description: 底部第三个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-18 17:24:44
-->
<template>
  <div ref="container" style="height:95%"></div>
</template>

<script>
import { Rose } from '@antv/g2plot';
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    loadCharts() {
      const data = [
        { type: '分类一', value: 27 },
        { type: '分类二', value: 25 },
        { type: '分类三', value: 18 },
        { type: '分类四', value: 15 },
        { type: '分类五', value: 10 },
        { type: '其他', value: 5 },
      ];

      const rosePlot = new Rose(this.$refs['container'], {
        data,
        xField: 'type',
        yField: 'value',
        seriesField: 'type',
        radius: 0.9,
        legend: {
          position: 'bottom',
        },
        interactions: [{ type: 'element-active' }],
      });

      rosePlot.render();

    }
  },
  created() { },
  mounted() {
    this.loadCharts()
  },
};
</script>
<style scoped>

</style>